<template>
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['0']">
      <el-submenu
        :index="`${categoryIndex}`"
        :key="`${categoryIndex}`"
        v-for="(category, categoryIndex) in categories"
      >
        <template slot="title"
          ><i class="el-icon-message"></i>{{ category.categoryName }}</template
        >
        <draggable
          :value="category.controls"
          :group="{ name: 'controlGroup', pull: 'clone', put: false }"
          :clone="cloneControl"
        >
          <el-menu-item
            :key="`${categoryIndex}-${controlIndex}`"
            v-for="(control, controlIndex) in category.controls"
            :index="`${categoryIndex}-${controlIndex}`"
            >{{ control.controlName }}</el-menu-item
          >
        </draggable>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {
      //controls: [20, 30, 40, 50],
      categories: [
        {
          categoryName: "常用(General)",
          controls: [
            {
              controlName: "按钮(Button)",
              defaultSettings: {
                xType: "q-button",
                text: "按钮",
              },
            },
            {
              controlName: "按钮(Button)",
              defaultSettings: {
                xType: "el-button",
                disabled: true,
                template:'<div>123</div>'
              },
            },
          ],
        },
        {
          categoryName: "布局(Layout)",
          controls: [
            {
              controlName: "容器(Container)",
              defaultSettings: {
                xType: "q-container",
                items: [],
              },
            },
            {
              controlName: "行(Row)",
              defaultSettings: {
                xType: "q-row",
                items: [],
              },
            },
            {
              controlName: "列(Col)",
              defaultSettings: {
                xType: "q-col",
                span: 4,
                items: [],
              },
            },
          ],
        },
        {
          categoryName: "表格(GridData)",
          controls: [
            {
              controlName: "表格(Table)",
              defaultSettings: {},
            },
          ],
        },
        {
          categoryName: "表单(Form)",
          controls: [
            {
              controlName: "字段(Field)",
              defaultSettings: {},
            },
          ],
        },
      ],
    };
  },
  methods: {
    cloneControl(control) {
      const settings = {
        ...control.defaultSettings,
        uuid: this.$options.filters._uuid(),
      };
      console.log(settings, "settings");
      return settings;
    },
  },
};
</script>
